<template>
	<view class="main">
		<view class="swipet-wrap">
			<u-swiper :list="swiperlist" :effect3d="true"></u-swiper>
		</view>
		<view class="boradcast">
			<u-notice-bar type="primary" :list="noticebarlist" :speed="100"></u-notice-bar>
		</view>
		<!-- 		<view class="navgtor">
			<view class="nav-item" v-for="(item,index) in tab_list" :key='index'>
				<u-image width="100rpx" height="100rpx" :src="item.image_src"></u-image>
				<view class="nav-text">
					{{item.content}}
				</view>
			</view>
		</view> -->
		<view class="grid-card">
			<view class="grid-content">
				<view class="card-title">
					<view class="title-sidebar"></view>
					<view class="title-text">
						我的课程
					</view>
				</view>
				<view class="card">
					<showcourse :list='course_list'></showcourse>
				</view>
			</view>
		</view>
		<view class="grid-card">
			<view class="grid-content">
				<view class="card-title">
					<view class="title-sidebar"></view>
					<view class="title-text">
						理论考试
					</view>
				</view>
				<view class="card">
					<exam-card v-for="(item,index) in examList" v-if="index<3" :key="index" :examItem='item'>
					</exam-card>
				</view>
			</view>
		</view>
		<view class="grid-card">
			<view class="grid-content">
				<view class="card-title">
					<view class="title-sidebar"></view>
					<view class="title-text">
						最新资源
					</view>
				</view>
				<view class="card">
					<showResource :resourcelist="resourcelist"></showResource>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperlist: [{
					image: '../../static/logo.png'
				}, {
					image: '../../static/物联网工程导论.jpg'
				}, {
					image: '../../static/通信原理.jpeg'
				}],
				noticebarlist: [

				],
				tab_list: [{
						content: '我的课程',
						image_src: "../../static/icon/course-active.png",
						detail: '../../static/icon/course-active.png',
						count: 9
					}, {
						content: '资源中心',
						image_src: "../../static/icon/resource-active.png",
						detail: 'pages/course/myCourse/myCourse',
						count: 3
					},
					{
						content: '理论考试',
						image_src: "../../static/icon/mine-active.png",
						detail: 'pages/course/myQandA/myQandA',
						count: 2
					}
				],
				course_list: [],
				resourcelist: [],
				examList: []
			}
		},
		onShow() {
			let account = '2020001',
				password = '123456'
			this.$api.login(account, password).then(res => {
				this.$store.commit('setAccessToken', res.values)
				return this.$api.getMyNotice(this.$store.state.access_token, {
					"type": "1",
					"status": "1",
					"title": "1"
				})
			}).then(res => {
				res.values.records.forEach(item => {
					this.noticebarlist.push(item.content)
				})
				return this.$api.getMyCourseParams(this.$store.state.access_token, '')
			}).then(res => {
				return this.$api.getMyCourseList(this.$store.state.access_token)
			}).then(res => {
				this.course_list = res.values.records
				console.log(this.course_list);
				return this.$api.resourceCenterget(this.$store.state.access_token, '')
			}).then(res => {
				console.log(res);
				return this.$api.resourceCenterpost(this.$store.state.access_token)
			}).then(res => {
				console.log(res);
				if (this.resourcelist.length) {
					return
				} else {
					for (let i = 0; i <= 3; i++) {
						this.resourcelist.push(res.values.records[i])
					}
				}
			})
		},
		methods: {
			buttonHandler() {
				this.$api.checkNotice(this.$store.state.access_token, {
					'id': "327472417147200"
				})
			}
		},
		onLoad() {
			var that = this
			// uni.getStorage({ //获得保存在本地的用户信息
			// 	key: 'token',
			// 	success: (res) => {
			// 		console.log('获取本地存储成功');
			// 		console.log('token_store res', res);
			// 		that.$store.commit('setAccessToken', res.data)
			// 		that.$store.state.hasLogin = true
			// 		// this.login(res.data);
			// 	},
			// 	fail() {
			// 		console.log('获取本地存储失败');
			// 		uni.showToast({
			// 			title: '请在登录后查看！',
			// 			duration: 2000
			// 		})
			// 		setTimeout(function() {
			// 			uni.navigateTo({
			// 				url: '@/pages/login/login'
			// 			})
			// 		}, 2000);
			// 	}
			// })

			this.$api.getExamList(1, '')
				.then(res => {
					console.log('examList', res)
					this.examList = res.values.records
				})
		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color;
	}

	.main {
		margin-top: 15rpx;

		.swiper-wrap {}

		.boradcast {
			box-sizing: border-box;
			margin: 25rpx 0 15rpx 0;
		}

		.navgtor {
			box-sizing: border-box;
			padding: 0rpx;
			display: flex;
			flex-direction: row;
			//justify-content: space-around;

			.nav-item {
				border-radius: 25rpx;
				box-shadow: 0 0 6px 1px rgba($color: #000000, $alpha: 0.2);
				box-sizing: border-box;
				background-color: white;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 15rpx 25rpx;
				margin: 0 15rpx;

				.nav-text {
					margin-top: 5rpx;
					font-size: 25rpx;
				}
			}
		}

		.grid-card {
			box-sizing: border-box;
			padding: 25rpx 0 0 0;

			.grid-content {
				background-color: #FFFFFF;
				box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.2);

				.card-title {
					display: flex;
					align-items: center;
					height: 90rpx;
					box-sizing: border-box;
					border-bottom: 1px #EEEEEE solid;

					.title-sidebar {
						box-sizing: border-box;
						margin-left: 25rpx;
						background-color: $theme-color;
						width: 10rpx;
						height: 34rpx;
						border-radius: 10rpx;
					}

					.title-text {
						margin-left: 15rpx;
						font-size: 36rpx;
						font-weight: bold;
					}
				}

				.grid-text {
					font-weight: bold;
				}
			}

		}




	}
</style>
